<template>
  <el-drawer
    v-model="modalVisible"
    direction="rtl"
    size="800"
    :append-to-body="true"
    :show-close="false"
    @close-auto-focus="closeDialog()"
  >
    <template #header>
      <h4>{{ dialogType == FormTypeEnum.EDIT ? "编辑" : "新增" }}参数</h4>
    </template>
    <template #default>
      <el-form
        ref="ruleFormRef"
        :model="row"
        status-icon
        append-to-body
        label-width="auto"
        label-position="top"
        class="demo-ruleForm"
        :rules="formRules"
      >
        <el-row :gutter="24" justify="center">
          <el-col :span="12">
            <el-form-item prop="value" label="枚举名称">
              <el-input v-model="row.value" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" justify="center">
          <el-col :span="12">
            <el-form-item prop="code" label="枚举值">
              <el-input v-model="row.code" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" justify="center">
          <el-col :span="12">
            <el-form-item prop="comment" label="注释">
              <el-input v-model="row.comment" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button plain @click="closeDialog">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="confirmEvent">确 定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { BasicEnumField } from "@@/apis/basic-data/types";
import { FormTypeEnum } from "@@/constants/other-keys";
import { cloneDeep } from "lodash";
import { ref, nextTick } from "vue";
import { watch } from "vue";

interface Props {
  visible: boolean
  dialogType: FormTypeEnum
  defaultInfo?: BasicEnumField
}
const props = defineProps<Props>()
const emits = defineEmits(['handleConfirm', 'closeDialog'])
const DEFAULT_ITEM_VALUE: BasicEnumField = {
  id: undefined,
  value: undefined,
  code: undefined,
  common: undefined
}
const row = ref<BasicEnumField>(cloneDeep(DEFAULT_ITEM_VALUE))
const modalVisible = ref<boolean>(false)
const loading = ref<boolean>(false)

const formRules = ref({
  code: [{ required: true, message: '请输入参数名', trigger: 'blur' }],
  recordType: [{ required: true, message: '请选择数据类型', trigger: 'blur' }]
})

const showDialog = () => {
  nextTick(() => {
    if (props.dialogType == FormTypeEnum.EDIT) {
      if (props.defaultInfo) {
        row.value = cloneDeep(props.defaultInfo);
      }
    } else {
      row.value = cloneDeep(DEFAULT_ITEM_VALUE);
    }
  })
}
const confirmEvent = () => {
  emits("handleConfirm", row.value)
  modalVisible.value = false
}
const closeDialog = () => {
  emits("closeDialog")
}

watch(
  () => props.visible,
  () => {
    modalVisible.value = props.visible
    if (modalVisible.value) {
      showDialog()
    }
  }
)
</script>

<style lang="scss" scoped>
.drawertable-content {
  height: calc(100vh - 350px);
}

.csc-search-input {
  width: 300px;
}
.edit-down-modal {
  display: flex;
  align-items: center;
}

.edit-popup-button {
  width: 60px;
}

.edit-down-pulldown {
  width: auto;
  flex-grow: 1;
}

:deep(.edit-down-input .vxe-input--inner) {
  border-radius: 4px 0 0 4px;
}

.mytable-scrollbar .vxe-radio--label {
  display: block;
}

.footerDiv {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--main-padding);
}
</style>
